<?php
require_once("includes/header.php");
?>
<link rel="stylesheet" type="text/css" href="static/css/CSSforEnrolment.css">
<script src="static/js/registration.js"></script>
<div>

    <div class="mx-auto" style="width: 500px;">
        <h5>REGISTRATION PAGE</h5>
        <br>
        <form id="registration_form" method="post" action="entrance.php">
            <div><span class="label">First Name:</span><input name="firstname" type="text" id="firstname"/>
            </div>
            <div class="error" id="firstnameError">Required: Please enter your first name</div>

            <div><span class="label">Surname:</span><input name="surname" type="text" id="surname"/></div>
            <div class="error" id="surnameError">Required: Please enter your surname</div>

            <div><span class="label">Password:</span><input name="password" type="text" id="password"/></div>
            <div class="error" id="passwordError">Required: Please enter your password</div>

            <div>
                <span class="label">Age:</span>
                <input name="age" type="number" min="16" step="1" max="90" pattern="\d+" id="age"/>
            </div>
            <div class="error" id="ageError">Required: Please enter your age - must be between 16 and 90</div>

            <div><span class="label">Email:</span><input name="email" type="text" id="email"/></div>
            <div class="error" id="emailError"> Required: Please enter a valid email</div>

            <div><span class="label">Home Address:</span><input name="address" type="text" id="address"/></div>

            <div><span class="label">Phone Number:</span><input name="phone" type="text" id="phone"/></div>
            <div class="error" id="phoneError">Required: Please enter a valid phone number</div>


            <div class="form_row">
                <span class="label">Membership Type:</span>
                <select name="customer" id="customer" onchange="changeFunc()">
                    <option value='choose yours' selected="selected">choose your customer type</option>
                    <option value="Individual">Individual</option>
                    <option value="Family">Family</option>
                </select>
            </div>
            <div class="error" id="customerError">Required: Please choose an option</div>

            <div><span class="label">Duration:</span>
                <select name="Duration" id="Duration">
                    <option value='choose yours' selected="selected">choose your duration</option>
                    <option value=1>Ongoing</option>
                    <option value=3>3 Months</option>
                    <option value=6>6 Months</option>
                    <option value=12>Yearly</option>
                </select>
            </div>
            <div class="error" id="DurationError">Required: Please choose an option</div>


            <div>
                <span>Referral:</span>
                <span style="margin-left: 90px">yes<input type="radio" value="yes"
                                                          name="refer"><br></span>
                <span style="margin-left: 154px">no <input type="radio" value="no" checked="checked"
                                                           name="refer"></span>


                <div style="margin-left: 90px" ;>if yes ,
                    <input name="referName" type="text" placeholder="please enter the member name ">
                </div>

                <br>
            </div>

            <div id="div_member_number" class="form_row" style="display: none">
                <div>
                    <span class="label">Member Number:</span>
                    <input name="family_member_number" id="family_member_number" type="number"
                           min="2" step="1" max="8" pattern="\d+" value="2" onchange="changeFunc()"
                    />
                </div>
                <div id="additional_member_info"></div>
                <!--  fee calculator  -->
            </div>

            <div class="form_row">
                <span class="label" id="fee_label">Fee Estimated:</span>
                <span id="fee_value"></span>
                <button type="button" class="small_button" id="fee_calculate" onclick="calculateFee()">Estimate
                </button>
            </div>

            <div>
                <input id="registration_submit" type="submit" value="Submit"/>
            </div>


        </form>
    </div>
</div>
<?php
require_once("includes/footer.php");
?>
